import {
  AbstractVideo,
  BulletList,
  C05CustomerService,
  C06HeroSlideBanner,
  C10TabSection,
  Header,
  Layout,
  Paragraph,
  Title,
  WithMargins,
  AbstractButton
} from "@/components";
import { AboutSubPageShape } from "@/data/about/aboutTypes";
import { colors } from "@/data/shared/colors";
import {
  getAbout,
  getSubAbout,
  useApplicationInfo,
} from "@/store/applicationDataContext";
import { getDiscoverTabId } from "@/utils/navigation";
import { Button, View } from "@tarojs/components";
import { useDidShow, useRouter, navigateBack, redirectTo } from "@tarojs/taro";
import { useEffect, useState } from "react";
import style from "./index.module.scss";

export default function AboutDetailPage() {
  const { dispatch } = useApplicationInfo();
  //const [about, setAbout] = useState<any>({})
  const { params } = useRouter();

  const [subPageData, setSubPageData] = useState<null | AboutSubPageShape>();

  useDidShow(async () => {
    // Always have sharing to discover About-tab
    dispatch({
      type: "SET_SHARE_DATA",
      data: {
        text: "关于我们",
        imagePath: "/assets/images/sharing-aboutus.jpg",
        url: `pages/discover/index?id=${getDiscoverTabId("about")}`,
      },
    });
    if (params && params.id) {
      const aboutDetail = await getSubAbout(params.id);
      aboutDetail && setSubPageData(aboutDetail);
    } else {
      navigateBack();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  });

  // useEffect(() => {
  //   if (about && params.id) {
  //     const castedId = +params.id;
  //     const matchedIdData = about.subPages.find(
  //       (subPageData) => subPageData.id === castedId
  //     );
  //     setSubPageData(matchedIdData ?? null);
  //   }
  // }, [about]);

  const handleJumpPage = item => {
    redirectTo({
      url: "/pages/web-view-container/index?link=" + item.link
    });
  };

  return (
    <Layout>
      <View
        className={style.wrapper}
        // Tab-section includes some spacing
        style={{ paddingBottom: subPageData?.details ? "20px" : "60px" }}
      >
        {subPageData && (
          <>
            {!!subPageData.carouselMap.length && (
              <C06HeroSlideBanner
                images={subPageData.carouselMap}
                themeColor={colors.colorViking}
                videoSrc={null}
              />
            )}
            <WithMargins>
              <View className="heading-l">{subPageData.title}</View>
            </WithMargins>
            {subPageData.details.map(
              (introductionChunk, introductionChunkIdx) => {
                switch (introductionChunk.type) {
                  case "title":
                    return (
                      <WithMargins>
                        <Title key={introductionChunkIdx}>
                          {introductionChunk.content}
                        </Title>
                      </WithMargins>
                    );
                  case "content":
                    return introductionChunk.content
                      .split(/\n/)
                      .map((contentChunk, contentChunkIdx) => (
                        <WithMargins>
                          <Paragraph key={contentChunkIdx}>
                            {contentChunk}
                          </Paragraph>
                        </WithMargins>
                      ));
                  case "unorderedList":
                    return (
                      <WithMargins>
                        <BulletList
                          key={introductionChunkIdx}
                          bulletListItems={introductionChunk.content.split(
                            /\n/
                          )}
                        />
                      </WithMargins>
                    );
                  case "video":
                    return (
                      <WithMargins>
                        <View
                          key={introductionChunkIdx}
                          style={{ marginTop: "20px" }}
                        >
                          {introductionChunk.content.map((videoObj) => (
                            <AbstractVideo
                              style={{ width: "100%", marginBottom: "20px" }}
                              src={videoObj.value}
                            />
                          ))}
                        </View>
                      </WithMargins>
                    );
                  case "labelPage":
                    return (
                      <C10TabSection
                        key={introductionChunkIdx}
                        tabContent={[introductionChunk]}
                      />
                    );
                  case "blueBGBTN": return (
                    <Button className={style["webview-btn"]} onClick={() => {
                      handleJumpPage(introductionChunk);
                    }}>{introductionChunk.content}</Button>
                  );

                  default:
                    break;
                }
              }
            )}

            {subPageData.detailTitle && (
              <WithMargins>
                <Header type="heading-n" className={style["detail-title"]}>
                  {subPageData.detailTitle}
                </Header>
              </WithMargins>
            )}

            {/* Tab section */}
            {/* {subPageData.details && (
              <C10TabSection tabContent={subPageData.details} />
            )} */}
          </>
        )}
      </View>
      <C05CustomerService />
    </Layout>
  );
}
